<template>
  <div class="service-progress-container">
    <!-- 背景图容器 -->
    <div class="bg-container">
      <div class="bg-mask"></div>
    </div>

    <div class="header">
      <h2 class="title">售后进度查询</h2>
      <p class="subtitle">查看您的售后申请状态和处理进度</p>
    </div>

    <el-card class="search-card" :shadow="hoverShadow">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="服务单号">
          <el-input 
            v-model="searchForm.orderNo" 
            placeholder="请输入服务单号" 
            clearable 
            size="large"
            class="input-style">
          </el-input>
        </el-form-item>

        <el-form-item label="申请日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="large"
            class="date-picker-style">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="服务状态">
          <el-select 
            v-model="searchForm.status" 
            placeholder="请选择状态" 
            clearable 
            size="large"
            class="select-style">
            <el-option label="全部" value="" />
            <el-option label="未完成" value="pending" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="search" 
            size="large"
            class="primary-btn">
            查询
          </el-button>
          <el-button 
            @click="resetSearch" 
            size="large"
            class="reset-btn">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="list-card" :shadow="hoverShadow">
      <el-table 
        :data="serviceList" 
        stripe 
        border 
        size="large"
        class="table-style"
        @mouseenter="handleTableEnter"
        @mouseleave="handleTableLeave">

        <el-table-column 
          prop="orderNo" 
          label="服务单号" 
          width="200"
          class="table-column">
        </el-table-column>

        <el-table-column 
          prop="serviceType" 
          label="服务类型" 
          width="150"
          class="table-column">
        </el-table-column>

        <el-table-column 
          prop="applyTime" 
          label="申请时间" 
          width="200"
          class="table-column">
        </el-table-column>

        <el-table-column 
          prop="status" 
          label="服务状态" 
          width="120"
          class="table-column">
          <template #default="scope">
            <el-tag 
              :type="getStatusType(scope.row.status)" 
              class="status-tag">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination-style">
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  dateRange: [],
  status: ''
})

// 分页信息
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 服务列表数据
const serviceList = ref([
  {
    id: 1,
    orderNo: 'S20230501001',
    serviceType: '整车安装',
    applyTime: '2023-05-01 09:30',
    status: 'completed'
  },
  {
    id: 2,
    orderNo: 'S20230503002',
    serviceType: '刹车系统维修',
    applyTime: '2023-05-03 14:20',
    status: 'pending'
  },
  {
    id: 3,
    orderNo: 'S20230505003',
    serviceType: '变速器调节',
    applyTime: '2023-05-05 11:15',
    status: 'pending'
  },
  {
    id: 4,
    orderNo: 'S20230507004',
    serviceType: '深度清洁保养',
    applyTime: '2023-05-07 09:45',
    status: 'completed'
  },
  {
    id: 5,
    orderNo: 'S20230510005',
    serviceType: '轮胎更换',
    applyTime: '2023-05-10 15:20',
    status: 'pending'
  }
])

// 卡片阴影状态
const hoverShadow = ref('')

// 生命周期钩子
onMounted(() => {
  loadServiceList()
  // 页面加载动画
  const elements = document.querySelectorAll('.search-card, .list-card')
  elements.forEach((el, index) => {
    setTimeout(() => {
      el.style.opacity = 1
      el.style.transform = 'translateY(0)'
    }, 100 * index)
  })
})

// 加载服务列表
const loadServiceList = () => {
  total.value = serviceList.value.length
}

// 搜索方法
const search = () => {
  console.log('搜索条件', searchForm)
  loadServiceList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.orderNo = ''
  searchForm.dateRange = []
  searchForm.status = ''
}

// 分页事件处理
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  loadServiceList()
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  loadServiceList()
}

// 状态转换方法
const getStatusText = (status) => {
  return status === 'completed' ? '已完成' : '未完成'
}

const getStatusType = (status) => {
  return status === 'completed' ? 'success' : 'warning'
}

// 表格悬停阴影
const handleTableEnter = () => {
  hoverShadow.value = 'always'
}

const handleTableLeave = () => {
  hoverShadow.value = ''
}
</script>

<style scoped>
.service-progress-container {
  position: relative;
  min-height: 100vh;
  padding: 20px 15px;
  overflow-x: hidden;
  background-image: url('D:\my-test_one\src\assets\img\examine.jpg'); /* 替换为你的图片地址 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}



.bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
}

.header {
  text-align: center;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.title {
  font-size: 26px;
  color: #2c3e50;
  margin-bottom: 8px;
  animation: fadeInUp 0.6s ease forwards;
}

.subtitle {
  font-size: 16px;
  color: #7f8c8d;
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 0.1s;
}

.search-card,
.list-card {
  max-width: 1000px;
  margin: 0 auto;
  background-color: white;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
}

.search-form {
  padding: 20px;
}

.input-style,
.date-picker-style,
.select-style {
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.primary-btn {
  background-color: #3498db;
  border-radius: 22px;
  padding: 10px 30px;
  transition: transform 0.3s ease;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.reset-btn {
  margin-left: 15px;
  color: #7f8c8d;
}

.table-style {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.table-column {
  padding: 12px;
  font-size: 15px;
  color: #333;
}

.status-tag {
  font-weight: 500;
  padding: 4px 12px;
}

.pagination-style {
  margin-top: 20px;
  text-align: center;
}

.el-pagination__sizes {
  margin-right: 8px;
}

.el-pagination__btn {
  border-radius: 4px;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .el-form-item {
    margin-bottom: 15px;
  }
}
</style>